{% extends "that_person_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/public_file/css/DepartmentSelection.css">
{% endblock %}


{% block style %}
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .add_class {
            background: #1E90FF;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        #confirm {
            width: 45%;height: 35px;border: #2db7f5 solid 1px;background: #2db7f5;letter-spacing: 10px;margin-left: 5px;color: white;
        }
        #confirm:hover {
            background: #0c6fd9;
        }
        #cancellation {
            width: 45%;height: 35px;border: #cecece solid 1px;background: #cecece;letter-spacing: 10px;
        }
        #cancellation:hover {
            background: #999999;
        }
        .file {
            position: relative;display: inline-block;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: white;line-height: 20px;text-decoration: none;text-indent: 0;background: #1E90FF;
        }
        .file input {
            position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
        }
        .file:hover {
            background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
        }

        #PasswordConfirm {
            width: 45%;height: 35px;border: #2db7f5 solid 1px;background: #2db7f5;letter-spacing: 10px;margin-left: 5px;color: white;
        }
        #PasswordConfirm:hover {
            background: #0c6fd9;
        }
        #PasswordCancellation {
            width: 45%;height: 35px;border: #cecece solid 1px;background: #cecece;letter-spacing: 10px;
        }
        #PasswordCancellation:hover {
            background: #999999;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;">
        <div style="width: 98%;margin-top: 1%;margin-left: 1%;height: 300px;font-size: 0;padding: 0;display: flex;position: relative;text-align: center;">
            <div style="background: linear-gradient(to right, #c9e2b3 , #2db7f5);display: inline-block;vertical-align: top;height: 100%;width: 50%;"></div>
            <div style="background: linear-gradient(to left, #c9e2b3 , #2db7f5);display: inline-block;vertical-align: top;height: 100%;width: 50%;"></div>
            <div style="width: 300px;height: 300px;position: absolute;z-index: 100;font-size: 14px;left: 50%;top:50%;transform: translate(-50%, -50%);text-align: center;">
                {% if obj.head_portrait %}
                    <img id="title_heard" src="/media/{{ obj.head_portrait }}" alt="" style="width: 200px;height: 200px;border-radius: 50%;margin-top: 10px;">
                {% else %}
                    <img id="title_heard" src="/static/personal_center/img/default.jpeg" alt="" style="width: 200px;height: 200px;border-radius: 50%;margin-top: 10px;">
                {% endif %}
                <div style="width: 100%;height: 80px;line-height: 30px;color: #f7f7f7;margin-top: 10px;letter-spacing: 2px;">
                    <p>{{ realname }} ({{ job_number }})</p>
                    <p>{{ department }}</p>
                </div>
            </div>
        </div>

        <div style="width: 98%;margin-left: 1%;height: 530px;margin-top: 0.5%;background: white;">
            <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;">
                <div style="width: 80%;height: 40px;line-height: 40px;float: left;padding-left: 1.5%;letter-spacing: 1.5px;">基本信息</div>
                <div style="width: 100px;height: 40px;float: right;margin-right: 10px;text-align: right;">
                    <button style="width: 90px;height: 30px;margin-top: 5px;border: #2db7f5 solid 1px;background: #2db7f5;color: white;letter-spacing: 5px;" onclick="ModifyingInformation()">编辑</button>
                </div>
                <div style="width: 100px;height: 40px;float: right;margin-right: 10px;text-align: right;">
                    <button style="width: 90px;height: 30px;margin-top: 5px;border: #2db7f5 solid 1px;background: #2db7f5;color: white;letter-spacing: 3px;" onclick="PasswordOnline()">修改密码</button>
                </div>
            </div>
            <div style="width: 100%;height: 485px;font-size: 0;padding: 0;display: flex;">
                <div style="font-size: 14px;display: inline-block;vertical-align: top;width: 50%;height: 100%;padding-left: 10%;">
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">姓名:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ realname }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">科室:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ department }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">职称:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.position }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">邮箱:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.mailbox }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">籍贯:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.native_place }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">民族:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.nation }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">学历:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{% if obj.jon_degree %}{{ obj.jon_degree }}{% else %}{{ obj.first_degree }}{% endif %}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="letter-spacing: 4px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">生日:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.birthday }}</div>
                    </div>
                </div>

                <div style="font-size: 14px;display: inline-block;vertical-align: top;width: 50%;height: 100%;">
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ job_number }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">联系电话:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.mobile }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">行政职位:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.post }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">人员类别:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.role }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">身份证号:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.ID_number }}</div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">政治面貌:</div>
                        <div style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;display: inline-block;line-height: 30px;margin-top: 7px;">{{ obj.political_outlook }}</div>
                    </div>
                    <div style="width: 100%;">
                        <div style="height: 90px;line-height: 90px;display: inline-block;vertical-align: top;">签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</div>
                        <div style="width: 80%;height: 90px;border: none;outline: none;padding-left: 1%;display: inline-block;">
                            {% if obj.signature_picture %}
                                <img id="SignMyName" src="/media/{{ obj.signature_picture }}" alt="" style="width: 150px;height: 80px;margin-top: 5px;">
                            {% else %}
                                <img id="SignMyName" src="/media/{{ obj.signature_picture }}" alt="" style="width: 150px;height: 80px;margin-top: 5px;visibility: hidden;">
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="GeneralInformation" class="shade">
        <div id="first-model" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 600px;height: 700px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box" style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 3px;border-top-right-radius: 3px;line-height: 40px;border-bottom: #dfdfdf solid 1px;">
                    <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 0px;font-size: 14px;">
                        基本信息
                    </div>
                    <span onclick="ModifyingClose()" style="float: right;padding-right: 2%;cursor: pointer;">
                        <i class="iconfont icon-quchu"></i>
                    </span>
                </div>
                <div style="width: 100%;height: 615px;background: white;padding-top: 10px;padding-left: 3.5%;">
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室:</label>
                        <input type="text" id="department" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" onclick="show_office_model()" name="{{ obj.company.id }}" value="{{ obj.company.name }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">联系电话:</label>
                        <input type="text" id="mobile" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.mobile }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</label>
                        <input type="text" id="position" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.position }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">行政职位:</label>
                        <input type="text" id="post" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.post }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</label>
                        <input type="text" id="mailbox" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.mailbox }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">人员类别:</label>
                        <input type="text" id="role" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.role }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯:</label>
                        <input type="text" id="native_place" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.native_place }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">政治面貌:</label>
                        <input type="text" id="political_outlook" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.political_outlook }}">
                    </div>
                    <div style="width: 100%;">
                        <label for="" style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:</label>
                        <input type="text" id="jon_degree" style="width: 80%;height: 30px;border: none;border-bottom: #cfcfcf solid 1px;outline: none;padding-left: 1%;margin-top: 5px;" value="{{ obj.jon_degree }}">
                    </div>
                    <div style="width: 100%;">
                        <div style="display: inline-block;height: 80px;line-height: 80px;vertical-align: top;">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像:</div>
                        <div style="width: 200px;height: 80px;display: inline-block;vertical-align: top;text-align: center;">
                            {% if obj.head_portrait %}
                                <img id="big_heard" src="/media/{{ obj.head_portrait }}" alt="" style="width: 80px;height: 80px;">
                            {% else %}
                                <img id="big_heard" src="/static/personal_center/img/default.jpeg" alt="" style="width: 80px;height: 80px;">
                            {% endif %}
                        </div>
                        <div style="height: 80px;display: inline-block;line-height: 7;">
                            <a href="javascript:;" class="file">
                                <i class="iconfont icon-upload"></i> 上传头像
                                <input type="file" name="" id="HeadPortrait" onchange="UpdateHeadPortraitView()">
                            </a>
                        </div>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <div style="display: inline-block;height: 80px;line-height: 80px;vertical-align: top;">签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</div>
                        <div style="width: 200px;height: 80px;display: inline-block;vertical-align: top;text-align: center;">
                            {% if obj.signature_picture %}
                                <img id="signature_picture_url_img" src="/media/{{ obj.signature_picture }}" alt="" style="width: 200px;height: 70px;">
                            {% else %}
                                <img id="signature_picture_url_img" src="/media/{{ obj.signature_picture }}" alt="" style="width: 200px;height: 70px;visibility: hidden;">
                            {% endif %}
                        </div>
                        <div style="height: 80px;display: inline-block;line-height: 7;">
                            <a href="javascript:;" class="file">
                                <i class="iconfont icon-upload"></i> 上传签名
                                <input type="file" name="" id="signature_picture" onchange="upload_signature_picture()">
                            </a>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;height: 40px;text-align: center;background: white;">
                    <button id="cancellation" onclick="ModifyingClose()">取消</button>
                    <button id="confirm" onclick="update_user()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <div id="ChangePassword" class="shade">
        <div id="PasswordModel" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 600px;height: 250px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="PasswordTitle" style="width: 100%;height: 40px;cursor: move;border-top-left-radius: 3px;border-top-right-radius: 3px;line-height: 40px;border-bottom: #dfdfdf solid 1px;">
                    <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 0px;font-size: 14px;">
                        修改密码
                    </div>
                    <span onclick="PasswordClose()" style="float: right;padding-right: 2%;cursor: pointer;">
                        <i class="iconfont icon-quchu"></i>
                    </span>
                </div>
                <div style="width: 100%;height: 165px;padding-left: 2%;padding-top: 2%;">
                    <div>
                        <label for="">原&nbsp;&nbsp;密&nbsp;&nbsp;码：</label>
                        <input id="old_pwd" type="text" style="width: 75%;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-left: 1%;" onfocus="add_color(this.id)" onblur="del_color(this.id)" autocomplete="off">
                    </div>
                    <div style="margin-top: 2%;">
                        <label for="">新&nbsp;&nbsp;密&nbsp;&nbsp;码：</label>
                        <input id="new_pwd" type="password" style="width: 75%;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-left: 1%;" onfocus="add_color(this.id)" onblur="del_color(this.id)" autocomplete="off">
                    </div>
                    <div style="margin-top: 2%;">
                        <label for="" style="letter-spacing: 1.7px;">确认密码：</label>
                        <input id="confirm_password" type="password" style="width: 75%;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-left: 1%;" onfocus="add_color(this.id)" onblur="del_color(this.id)" autocomplete="off">
                    </div>
                </div>
                <div style="width: 100%;height: 40px;text-align: center;">
                    <button id="PasswordCancellation" onclick="PasswordClose()">取消</button>
                    <button id="PasswordConfirm" onclick="ChangeCypher()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <div id="selection-office" class="office-shade">
            <div id="office-model">
                <!-- 标题 -->
                <div id="office-title">
                    <h5 style="line-height: 40px;width: 15%;margin-left: 1%;display: inline-block;font-size: 14px;">选择科室</h5>
                    <span onclick="close_office_models()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
                </div>
                <hr>
                <div style="width: 55%;height: 350px;vertical-align: top;left: 0;display: inline-block;border-right: #cfcfcf solid 1px;">
                    <div style="width: 100%;height: 50px;line-height: 50px;padding-left: 2%;">
                        <input id="search_data1" onkeydown="search_dep()" class="search-input" type="text" placeholder="搜索" autocomplete="off">
                    </div>
                    <div id="processed" style="width: 100%;height: 300px;overflow: auto;">
                        {% for company in company_list %}
                            <div style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;">
                                <input class="check_box1" id="{{ company.id }}" type="checkbox" onclick="check_dep_ff('{{ company.name }}', '{{ company.id }}', false)"> {{ company.name }}
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div style="width: 43%;height: 360px;vertical-align: top;left: 0;display: inline-block;">
                    <div style="width: 100%;height: 50px;line-height: 50px;padding-left: 2%;font-size: 14px;">
                        已选择科室
                    </div>
                    <div id="processed_prople" style="width: 100%;height: 265px;overflow: auto;padding-left: 2%;">

                    </div>
                    <div style="width: 100%;height: 40px;text-align: center;">
                        <button onclick="summit_val()" style="border-radius: 2px;height: 30px;margin-top: 5px;border: #1E90FF solid 1px;background: #1E90FF;color: white;width: 80px;letter-spacing: 4px;font-size: 14px;">
                            提交
                        </button>
                        <button onclick="close_office_models()" style="border-radius: 2px;height: 30px;margin-top: 5px;border: #cfcfcf solid 1px;width: 80px;letter-spacing: 4px;margin-left: 15px;font-size: 14px;">
                            取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/public_file/js/DepartmentSelection.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("information").className = "add_class";
            document.getElementById("my-center").className = "add-nav-active";
        };

        function ModifyingInformation() {
            document.getElementById("GeneralInformation").style.display = "table-row";
        }

        function ModifyingClose() {
            document.getElementById("GeneralInformation").style.display = "none";
        }

        let staff_box = document.querySelector("#box");
        let staff_model = document.querySelector("#first-model");
        staff_box.addEventListener("mousedown", function (e) {
            let x = e.pageX - staff_model.offsetLeft;
            let y = e.pageY - staff_model.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                staff_model.style.left = e.pageX - x + 'px';
                staff_model.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        let PasswordTitle = document.querySelector("#PasswordTitle");
        let PasswordModel = document.querySelector("#PasswordModel");
        PasswordTitle.addEventListener("mousedown", function (e) {
            let x = e.pageX - PasswordModel.offsetLeft;
            let y = e.pageY - PasswordModel.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                PasswordModel.style.left = e.pageX - x + 'px';
                PasswordModel.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function UpdateHeadPortraitView() {
            var form = new FormData();
            var files = document.getElementById("HeadPortrait").files[0];
            form.append('HeadPortrait', files);
            form.append('username', '{{ job_number | safe }}');
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/system-setup/update-headPortrait-view", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate['code']===200){
                            document.getElementById("title_heard").src = JsonDate['data']["head_portrait"];
                            document.getElementById("big_heard").src = JsonDate['data']["head_portrait"];
                            document.getElementById("model-img").src = JsonDate['data']["head_portrait"];
                        }
                        else{
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function upload_signature_picture() {
            var form = new FormData();
            var files = document.getElementById("signature_picture").files[0];
            form.append('files', files);
            form.append('username', '{{ job_number | safe }}');

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/system-setup/update-signature-picture", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate['code']===200){
                            document.getElementById("signature_picture_url_img").src = JsonDate['data']["signature_picture"];
                            document.getElementById("SignMyName").src = JsonDate['data']["signature_picture"];
                            document.getElementById("signature_picture_url_img").style.display = "block";
                            document.getElementById("SignMyName").style.display = "block";
                        }
                        else{
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function update_user() {
            document.getElementById("loading").style.display='inline-block';
            var form = new FormData();
            var department = $("#department").attr("name");
            var mobile = document.getElementById("mobile").value;
            var position = document.getElementById("position").value;
            var post = document.getElementById("post").value;
            var mailbox = document.getElementById("mailbox").value;
            var role = document.getElementById("role").value;
            var native_place = document.getElementById("native_place").value;
            var political_outlook = document.getElementById("political_outlook").value;
            var jon_degree = document.getElementById("jon_degree").value;

            form.append('user_id', '{{ obj.id }}');
            form.append('department', String(department));
            form.append('mobile', String(mobile));
            form.append('position', String(position));
            form.append('post', post);
            form.append('mailbox', String(mailbox));
            form.append('role', String(role));
            form.append('native_place', String(native_place));
            form.append('political_outlook', String(political_outlook));
            form.append('jon_degree', String(jon_degree));
            var xhr=new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/that-center/InformationModification", true);
            xhr.send(form);
            xhr.onreadystatechange=function(){
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display='none';
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            alert("修改成功！");
                            window.location.reload();
                        }
                        else {
                            alert(JsonDate["message"])
                        }
                    }
                }
            }
        }

        function summit_val() {
            var processed_prople = document.getElementsByClassName("selected-department");
            if (processed_prople.length === 0){
                alert("请选择拟稿科室！");
                return false
             }
            var dep_list=[];var product_company_list=[];
            for (var i=0; i<processed_prople.length; i++) {
                dep_list.push(processed_prople[i].innerText.split("(")[0])
                product_company_list.push(processed_prople[i].innerText.split("(")[1].replace(")", ''))
            }
            document.getElementById("department").value=dep_list.join();
            document.getElementById("department").setAttribute("name", product_company_list.join())
            close_office_models()
        }

        function PasswordOnline() {
            document.getElementById("ChangePassword").style.display = "table-row";
        }

        function PasswordClose() {
            document.getElementById("ChangePassword").style.display = "none";
        }

        function add_color(obj_id) {
            document.getElementById(obj_id).style.border = "solid 1px #0c6fd9"
        }

        function del_color(obj_id) {
            document.getElementById(obj_id).style.border = "solid 1px #efefef"
        }

        function ChangeCypher() {
            var form = new FormData();
            var old_pwd = document.getElementById("old_pwd").value;
            var new_pwd = document.getElementById("new_pwd").value;
            var confirm_password = document.getElementById("confirm_password").value;
            if (!old_pwd){
                alert("请输入原密码！");
                return false
            }
            if (!new_pwd){
                alert("请输入新密码！");
                return false
            }
            if (new_pwd !== confirm_password){
                alert("两次密码不符，请重新输入！");
                return false
            }
            form.append('old_password', String(old_pwd));
            form.append('new_password', String(new_pwd));
            form.append('new_password2', String(confirm_password));
            document.getElementById("loading").style.display='inline-block';
            var xhr=new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/personal-center/ChangePassword", true);
            xhr.send(form);
            xhr.onreadystatechange=function(){
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display='none';
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            alert("修改成功！");
                            window.location.href='/personal-center/logout';
                        }
                        else {
                            alert(JsonDate["message"])
                        }
                    }
                }
            }
        }
    </script>
{% endblock %}
